<template>
	<view>
		<view class="column-levelCenter">

			<image v-if="userInfo.headerImageUrl != null" class="headerImage" :src="userInfo.headerImageUrl" mode="">
			</image>

			<image v-if="userInfo.headerImageUrl == null" class="headerImage" :src="headerImageUrl" mode=""></image>
			<view class="titleColor" style="margin-top: 10px; font-size: 15px;">
				{{userInfo.nickname?? '微信用户'}}
			</view>

			<view class="mainColor" style="margin-top: 15px; font-size: 15px;">
				当前积分:{{integral}}积分
			</view>
		</view>
		<view v-if="userInfo.memberType == '0'" class="" style="padding: 0px 10px;">
			<view @click="toVipPage()" class="row-lineConter openVipView" style="margin-top: 20px;">
				<view style="flex-grow: 1;">
					<view class="">
						开通会员，享受专属特权
					</view>
					<view class="">
						免积分不限次数查看二维码赠送置顶次数
					</view>
				</view>
				<view class="openVipBtn zsConter mainBgColor">
					去开通
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20px; padding: 0px 10px; font-size: 15px;">
			<view v-for="(item,index) in uiDataList" :key="index">
				<view class="row-lineConter titleColor" style="margin: 10px 0px;">
					<view class="blockTextColor" style="font-size: 13px;">
						{{item.title}}
					</view>
					<view class="row-lineConter" style=" flex-grow: 1; flex-direction: row-reverse;">
						<view @click="btnClick(item.btnTitle)" v-if="item.completed==false" class="btn mainBgColor"
							style="margin-left: 10px;">
							{{item.btnTitle}}
						</view>
						<view v-if="item.completed==true" class="label zsConter" style="margin-left: 10px;">
							{{item.btnTitle}}
						</view>
						<view class="subTextColor" style="font-size: 12px;">
							{{item.explain}}
						</view>

					</view>
				</view>
				<view class="lineStyle">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				integral: '-',
				headerImageUrl: 'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/defaultHeaderImage.jpeg',
				userInfo: {},
				uiDataList: [
					{
							title: '购买积分',
							icon: '',
							explain: '10元购买200积分',
							btnTitle: '购买',
							completed: false
					
						},
					
					{
						title: '看视频',
						icon: '',
						explain: '每看完一个视频奖励+10积分',
						btnTitle: '观看',
						completed: false

					},
					
					{
						title: '每日签到',
						icon: '',
						explain: '每日签到可获得10积分',
						btnTitle: '签到',
						completed: false

					},
					{
						title: '添加客服',
						icon: '',
						explain: '首次添加客服微信+20积分',
						btnTitle: '添加',
						completed: false

					},
					{
						title: '新用户',
						icon: '',
						explain: '新用户登录即可获得+30积分',
						btnTitle: '已完成',
						completed: true
					}
				]
			}
		},
		onLoad() {
			this.userInfo = this.$userInfo;
			this.integral = this.userInfo.integral;
			if (this.ad == null) {
				this.loadAd();
			}
			this.setData();
			
		},
		methods: {
			setData(){
				var checkInTime = uni.getStorageSync('checkInTime')//签到时间
				if(checkInTime){
					const timestamp = new Date().getTime();
					var date = this.$publicApi.dateToStr(timestamp);
					if(date == checkInTime){
						console.log('今天已经签到了==');
						var item = this.uiDataList[2]
						item.completed = true;
						item.btnTitle = '今日已签到'
					}
				}
			},
			loadAd() {
				if (wx.createRewardedVideoAd) {
					this.ad = wx.createRewardedVideoAd({
						adUnitId: 'adunit-766997bf3d9fb465'
					});
					this.ad.onLoad(() => {
						console.log('激励视频广告加载成功');
					});
					this.ad.onError((err) => {
						console.error('激励视频广告加载失败', err);
					});
					this.ad.onClose((res) => {
						console.log('onClose event emit11', res);
						if (res && res.isEnded) {
							console.log('用户完整观看了广告，可以发放奖励');
							this.update_integral(10);
						} else {
							console.log('用户未完整观看广告2');
							uni.showModal({
							  title: '温馨提示', // 弹窗的标题
							  content: '观看完整广告才可获取积分', // 弹窗的内容
							  showCancel: false, // 是否显示取消按钮，默认为true
							  confirmText: '确定', // 确定按钮的文字，默认为"确定"
							});
						}
					});
				}

			},
			btnClick(title) {
				if(title == '购买'){
				  
				}
				if (title == '观看') {
					this.showAd();
				}
				if(title == '签到'){
				   this.clickSignIn()
				}
			},
			//看视频
			showAd() {
				if (this.ad) {
					this.ad.show().then(() => {
						console.log('激励视频广告显示成功');
					}).catch((err) => {
						console.error('激励视频广告显示失败', err);
					});
				}
			},
			//签到
			clickSignIn(){
				this.update_integral(10);
				const timestamp = new Date().getTime();
				var checkInTime = this.$publicApi.dateToStr(timestamp);
				console.log('签到时间==',checkInTime);
				uni.setStorage({
					key: 'checkInTime',
					data: checkInTime,
					success(lres) {
						console.log('存本地成功=', lres)
					},
					fail(failres) {
						console.log('存本地失败=', failres)
					}
				
				})
				var item = this.uiDataList[2]
				item.completed = true;
				item.btnTitle = '今日已签到'
			},
			
			

			//增加积分
			update_integral(integral) {
				uni.showLoading({
					title:'积分增加中...',
				})
				var integralRes = parseInt(this.$userInfo.integral) + integral;
				var opennId = this.$userInfo.openId;
				this.$userInfo.integral = integralRes.toString();
				this.saveLocalUserInfo(this.$userInfo);
				this.$uniCloudApi.update_integral_openId(opennId, integralRes.toString()).then(res => {
					this.$showToast('获得奖励积分+' + integral.toString())
					this.integral = integralRes.toString();
				}).catch(err => {
					this.$showToast(err)
				});
			},
			saveLocalUserInfo(userInfo) {
				var that = this;
				uni.setStorage({
					key: 'userInfo',
					data: userInfo,
					success(lres) {
						that.$setUserInfo(userInfo);
						console.log('存本地成功=', lres)
					},
					fail(failres) {
						console.log('存本地失败=', failres)
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.headerImage {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}

	.btn {
		padding: 4px 8px;
		color: white;
		font-size: 10px;
		border-radius: 4px;
		box-shadow: 0rpx 0rpx 20rpx rgb(52, 116, 246);
	}

	.label {
		color: white;
		font-size: 10px;
		padding: 0rpx 10rpx;
		height: 36rpx;
		border-radius: 15rpx;
		color: rgba(71, 120, 244, 1);
		// background-color: royalblue;
		border: 1px solid rgba(71, 120, 244, 1);
		/* 设置1像素的黑色实线边框 */
	}

	.openVipView {
		color: rgb(224, 168, 99);
		border-radius: 8rpx;
		padding: 16rpx 10px;
		background-color: rgba(224, 168, 99, 0.2);
		border: 1px solid rgb(224, 168, 99);
	}

	.openVipBtn {
		color: white;
		font-size: 25rpx;
		padding: 0px 10px;
		height: 60rpx;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 20rpx rgb(52, 116, 246);
	}
</style>